<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>教练详情</title>

    <script src="js/flexible.js"></script>

    <link rel="stylesheet" href="css/flexible.css">

    <link rel="stylesheet" href="css/reset.css">

    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="css/vant.css">

    <script src="js/jquery-3.3.1.min.js"></script>

    <script src="js/vue/vue.js"></script>

    <script src="js/vue/axios.js"></script>

    <script src="js/vue/MD5.js"></script>

    <script src="js/vue/vant.js"></script>

    <script src="js/vue/qs.js"></script>

    <style>

        .curriculum_kc {

            margin-bottom:0 !important;

            padding-top: 0.2rem;

            background-color: white;

            -moz-box-shadow: none;

            -webkit-box-shadow: none; 

            box-shadow: none; 

        }

    </style>

</head>

<body>

<div id="app">

    <div class="curriculum_list">

        <div class="curriculum_kc">

            <template>

                <div class="tx">

                    <img :src="coach.Picurl" onerror="this.src='images/tx.png'">

                </div>

                <div class="content" style="margin-top: .15rem;">

                    <div class="name fl">{{coach.Sname}}</div>

                    <div class="clear h10"></div>

                </div>

                <div class="clear"></div>

            </template>

        </div>

    </div>

    <div class="h10 mg"></div>

    <div class="curriculum_list">

        <div style="padding-top: .1rem;">

            <p class="introduceDetails">教练介绍</p>

            <div class="caochSm" v-if="coach.Info!=null">{{coach.Info}}</div>

            <div style="text-align: center;font-size: 12px;color: #999999;" v-else>暂无介绍</div>

        </div>

    </div>

    <div class="h10 mg"></div>

    <div class="curriculum_list">

        <div style="padding-top: .1rem;">

            <p class="introduceDetails coachXc">教练相册</p>

            <a href="xcDetails.html" class="moreCoach">更多</a>

        </div>

        <div class="clear"></div>

        <div class="caochSm">

            <img  :src="item" v-for="(item,index) in piclist" v-if="index<4"/>

        </div>

    </div>

    <div class="h10 mg"></div>

    <div class="fx_xx">

        <ul>

            <li v-for="(item,index) in typeKc" :class="{'xx_check':isShowPj==index}"  @click="kcpj(index)">{{item.name}}</li>

        </ul>

    </div>

    <div class="">

        <!--团课课程-->

        <div class="kc_jianjie" v-if="isShowPj=='0'">

            <div class="curriculum_list" v-if="curriculumList.length>0">

                <div class="curriculum_kc" v-for="item in curriculumList" :key="item.id">

                    <template>

                    <div class="tx">

                        <img :src="item.picurl" onerror="this.src='images/tx.png'">

                    </div>

                    <div class="content">

                            <div class="title fl">{{item.title}}</div>

                            <div class="name fl">{{item.Sname}}</div>

                            <div class="clear h10"></div>

                            <div class="address fl">{{item.Space}}</div>

                            <div class="time fl">{{item.stime}}-{{item.etime}}</div>

                            <div class="clear h10"></div>

                            <div class="yy fl">预约 {{item.yyNum}}/{{item.max}}</div>

                            <div class="num fl">预约满{{item.min}}人开课</div>

                        <div class="clear h10"></div>

                        <div v-if="item.user_pic_arr">

                            <div class="hytx">

                                <img v-for="items in item.user_pic_arr" :src="items" onerror="this.src='images/tx.png'" alt="会员头像">

                                <div style="float: right;"><a href="#" @click="pingjia(item.plan_id,0,item.date,item.stime)">评价本节课</a></div>

                            </div>

                            <div class="clear"></div>

                            <div class="ts">他们都来上课了哦~</div>

                        </div>

                        <div class="clear"></div>

                    </div>

                    <div class="btn">

                        <div v-if="item.yy_state=='0'" class="qxOrder">预约已过</div>

                        <div @click="order(item.date,item.key,item.currid,item.plan_id)" v-else-if="item.yy_state=='1'" class="an">

                            预约

                        </div>

                        <div v-else-if="item.yy_state=='2'" class="an qxOrder">预约已满</div>

                        <div v-else-if="item.yy_state=='3'" class="an">

                            <div @click="sign(item.uboid)">签到</div>

                            <div @click="qxCancel(item.uboid)" class="qxOrder">取消预约</div>

                        </div>

                        <div v-else-if="item.yy_state=='4'" class="qxOrder">已签到</div>

                        <div v-else class="qxOrder">已违约</div>

                    </div>

                    <div class="clear"></div>

                    </template>

                </div>

            </div>

        </div>



        <!--私课-->

        <div class="kc_pingjia" v-if="isShowPj=='1'">

            <div class="curriculum_list" v-if="kcData.length>0">

                <div class="curriculum_kc" v-for="item in kcData" :key="item.id">

                    <template>

                    <div class="tx">

                        <img :src="item.picurl" onerror="this.src='images/tx.png'">

                    </div>

                    <div class="content">

                            <div class="title fl">{{item.Title}}</div>

                            <div class="name fl">{{item.Sname}}</div>

                            <div class="clear h10"></div>

                            <div class="address fl">{{item.Space}}</div>

                            <div class="time fl">{{item.stime}}-{{item.etime}}</div>

                            <div class="time fl">{{item.Chour}}</div>

                        <div class="clear h10"></div>

                       

                    </div>

                    <div class="btn">

                        <div v-if="item.yy_state=='0'" class="qxOrder">预约已过</div>

                        <div @click="orderSk(item.Date,items.Key,items.PONEid,items.Pid)" v-else-if="item.yy_state=='1'" class="an">

                            预约

                        </div>

                        <div v-else-if="item.yy_state=='2'" class="an qxOrder">预约已满</div>

                        <!-- <div v-else-if="item.yy_state=='3'" class="an">

                            <div @click="sign(item.uboid)">签到</div>

                            <div @click="qxCancel(item.uboid)" class="qxOrder">取消预约</div>

                        </div> -->

                        <div v-else-if="item.yy_state=='4'" class="qxOrder">已签到</div>

                        <div v-else class="qxOrder">已违约</div>

                    </div>

                    <div class="clear"></div>

                    </template>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

<script>

var vm=new Vue({

        el: '#app',

        data: {

            show:false,

            widths:'',

            date:'',

            dateList:[],

            curriculumList:[],

            kcData:[],

            currentDate: new Date(),

            endTimePop:false,

            vids:'',

            coach:{},

            piclist:{},

            Sid:'',

            isShowPj:'0',

            typeKc:[

                {"name":"团课"},

                {"name":"私教课"}

            ],

            currIndex:'0',

        },

        created(){

            this.setCanS()

        },

        methods:{

            setCanS(){

                let Request = new Object()

                Request = GetRequest()

                this.Sid=Request['Sid']

                this.getlist()

            },

            change(e) {

                console.log(e.getValues()) // 打印出了选中的时间，是个数组

            },

            //团课数据的获取

            getlist(){

                window.vant.Toast.loading({

                    mask: true,

                    message: '加载中...'

                });

                const params={

                    Sid:this.Sid

                }

                getVs()

                axios.get('/mobileapi/member/coach.php?act=info_t',{params:params}).then(data =>{

                    console.log(data.data)

                    let { msg, code,user} = data.data

                        if (code !== 200) {

                            this.$message({

                                message: msg,

                                type: 'error'

                            });

                        } else {

                            window.vant.Toast.clear()

                            data=data.data

                            this.curriculumList=data.data.final

                            this.coach=data.data.info

                            this.piclist=data.data.piclist

                            sessionStorage.setItem('piclist',JSON.stringify(this.piclist))

                        }

                    }).catch(function (error) { 

                        console.log(error); 

                });

            },

            //私教课数据的获取

            getSlist(){

                window.vant.Toast.loading({

                    mask: true,

                    message: '加载中...'

                });

                const params={

                    Sid:this.Sid

                }

                getVs()

                axios.get('/mobileapi/member/coach.php?act=info_p',{params:params}).then(data =>{

                    console.log(data.data)

                    let { msg, code,user} = data.data

                        if (code !== 200) {

                            this.$message({

                                message: msg,

                                type: 'error'

                            });

                        } else {

                            window.vant.Toast.clear()

                            data=data.data

                            this.kcData=data.data.list

                            this.coach=data.data.info

                            this.piclist=data.data.piclist

                            sessionStorage.setItem('piclist',JSON.stringify(this.piclist))

                        }

                    }).catch(function (error) { 

                        console.log(error); 

                });

            },



            //签到

            sign(id){

                let from={

                    id:id

                }

                from=JSON.stringify(from)

                let sign=md5(from)

                const params={

                    from:from,

                    sign:sign

                }

                getVs()

                axios.post('/mobileapi/member/curriculum_t.php?act=YYSign',Qs.stringify(params)).then(data =>{

                    console.log(data.data)

                    let { msg, code,user} = data.data

                        if (code !== 200) {

                            window.vant.Toast.fail(data.data.msg);

                        } else {

                            window.vant.Toast.success('签到成功')

                            this.timer = setTimeout(this.getlists(this.date), 2000);

                            //this.getlists()

                        }

                    }).catch(function (error) { 

                        console.log(error); 

                });

            },

            //取消预约

            qxCancel(id){

                let from={

                    id:id

                }

                from=JSON.stringify(from)

                let sign=md5(from)

                const params={

                    from:from,

                    sign:sign

                }

                //console.log(params)

                getVs()

                axios.post('/mobileapi/member/curriculum_t.php?act=YYCancel',Qs.stringify(params)).then(data =>{

                    console.log(data.data)

                    let { msg, code,user} = data.data

                        if (code !== 200) {

                            window.vant.Toast.fail(data.data.msg)

                        } else {

                            window.vant.Toast.success('预约取消成功')

                            this.timer = setTimeout(this.getlists(this.date), 2000);

                        }

                    }).catch(function (error) { 

                        console.log(error); 

                });

            },

            //预约

            order(date,key,currid,plan_id){

                window.location.href='curriculum_t_yvyue.html?date='+date+'&key='+key+'&currid='+currid+'&plan_id='+plan_id+''

            },

            //团课和私教课的切换

            kcpj(type){

                this.isShowPj=type

                if(type=='0'){

                    this.getlist()

                }else{

                    this.getSlist()

                }

            },

            zkSq(index){

                console.log(index)

                this.currIndex=index+1

            },

            zkSqS(index){

                console.log(index)

                this.currIndex=index

            },

            orderSk(Date,Key,PONEid,Pid){

                window.location.href='curriculum_p_yvyue.html?date='+Date+'&key='+Key+'&poneid='+PONEid+'&pid='+Pid+''

            },

    }

})

</script>

</html>